// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';

// 视图插件
import {
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

// css OR less预编译器

// 图片

const FormItem = Form.Item;

/**
 *  Created by xjc on 2019/8/15
 *  Describe:数据连接
 */

@connect(({ authority, loading }) => ({
  authority,
  loading: loading.models.AuthorityRule,
}))
@Form.create()
class MenuDetail extends PureComponent {
  componentWillMount() {}

  /**
   *  Created by xjc on 2019/8/15
   *  Describe:当前状态
   */

  state = {};

  onChange = e => {};

  okHandle() {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { dispatch } = this.props;
        dispatch({
          type: 'authority/ChangeMenuDetail',
          payload: {
            id: values.id,
            parentId: values.parentId,
            name: values.permissionname,
            type: values.type,
            url: values.url,
          },
          callback: res => {
            if (res.code === 1) {
              message.success(res.message);
              this.props.closeMenuDetail();
            } else {
              message.warning(res.message);
            }
          },
        });
      }
    });
  }

  cancelHandle() {
    this.props.closeMenuDetail();
  }

  render() {
    const {} = this.state;
    const { record, form, EditORExamine } = this.props;
    const { getFieldDecorator } = form;
    let readOnlyORNot = true;
    if (EditORExamine === 'Edit') {
      readOnlyORNot = false;
    }
    return (
      <Modal
        destroyOnClose
        title="角色信息详情"
        visible
        centered
        onOk={this.okHandle.bind(this)}
        onCancel={this.cancelHandle.bind(this)}
      >
        <Form onSubmit={this.handleSearch} style={{ overflowY: 'scroll' }}>
          <FormItem label="ID" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
            {getFieldDecorator('id', { initialValue: record.id })(
              <Input readOnly style={{ width: '85%' }} placeholder="ID" disabled />
            )}
          </FormItem>

          <FormItem label="父级ID" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
            {getFieldDecorator('parentId', { initialValue: record.parentid })(
              <Input readOnly={readOnlyORNot} style={{ width: '85%' }} placeholder="父级ID" />
            )}
          </FormItem>

          <FormItem label="菜单标识" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
            {getFieldDecorator('permission', { initialValue: record.permission })(
              <Input readOnly style={{ width: '85%' }} placeholder="菜单标识" disabled />
            )}
          </FormItem>

          <FormItem label="菜单名称" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
            {getFieldDecorator('permissionname', { initialValue: record.permissionname })(
              <Input readOnly={readOnlyORNot} style={{ width: '85%' }} placeholder="菜单名称" />
            )}
          </FormItem>

          <FormItem label="菜单/按钮(1/0)" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
            {getFieldDecorator('type', { initialValue: record.type })(
              <Input
                readOnly={readOnlyORNot}
                style={{ width: '85%' }}
                placeholder="菜单/按钮(1/0)"
              />
            )}
          </FormItem>

          <FormItem label="地址" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
            {getFieldDecorator('url', { initialValue: record.url })(
              <Input readOnly={readOnlyORNot} style={{ width: '85%' }} placeholder="地址" />
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }

  componentDidMount() {}

  componentWillUnmount() {}
}

export default MenuDetail;
